<template>
  <div class="content">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item style="line-height:0"
        ><img
          src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/145985/19/3061/148273/5f1024e9Ecfaf3a02/f5125363df7e2b3a.jpg!cr_1125x445_0_171!q70.jpg.dpg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item style="line-height:0"
        ><img
          src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/65271/33/16617/86253/5de0bcbbEb338baef/781aa8d4c7197567.jpg!cr_1125x445_0_171!q70.jpg.dpg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item style="line-height:0"
        ><img
          src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/148325/3/3154/120056/5f1165d2Ed915ac70/d00364dfb4d6b771.jpg!cr_1125x445_0_171!q70.jpg.dpg"
          alt=""
      /></van-swipe-item>
      <van-swipe-item style="line-height:0"
        ><img
          src="//imgcps.jd.com/ling4/71651175347/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5c131e9282acdd181da661b8/e17d5655/cr_1125x445_0_171/s1125x690/q70.jpg"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <ul class="banner">
      <li v-for="item in goods" :key="item.id">
        <img :src="item.img" :key="item.id" alt="" />
        <p>{{ item.title }}</p>
      </li>
    </ul>
    <van-grid square>
      <van-grid-item
        v-for="item in list"
        :key="item._id"
        :text="item.name"
        :icon="item.coverImg"
      />
    </van-grid>
    <van-tabs>
      <van-tab v-for="index in 8" :title="'标签' + index" :key="index">
      </van-tab>
    </van-tabs>
    <ul class="LR">
      <li v-for="item in list" :key="item._id">
        <img :src="item.coverImg" alt="" />
        <p><span>京东物流</span>{{ item.name }}</p>
        <div>
          <span>￥ {{ item.price }}</span>
          <p>看相似</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import axios from "axios";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      goods: [
        {
          id: 1,
          name: "京东",
          title: "京东超市",
          img:
            "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png",
        },
        {
          id: 2,
          name: "数码",
          title: "数码电器",
          img:
            "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/135931/4/3281/5598/5efbf2c0Edbdc82c7/ed9861b4ddfb9f30.png.webp",
        },
        {
          id: 3,
          name: "服饰",
          title: "京东服饰",
          img:
            "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/140012/8/1804/3641/5efbf318E38bd5dad/0db99d859ab16ce9.png.webp",
        },
        {
          id: 4,
          name: "生鲜",
          title: "京东生鲜",
          img:
            "http://m.360buyimg.com/mobilecms/s120x120_jfs/t1/129215/21/5978/3618/5efbf344Ebec23ae8/59712d986b10bb0a.png.webp",
        },
      ],
      count: 1,
      list: [],
    };
  },
  created() {
    axios.get("http://localhost:3009/api/v1/products").then((res) => {
      console.log(res.data);
      this.list = res.data.products;
    });
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.van-grid-item__icon {
  font-size: 60px;
}
.van-swipe-item img {
  width: 100%;
}
.van-grid-item__icon + .van-grid-item__text {
  margin-top: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 94px;
}
.van-grid {
  overflow: hidden;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
.content span {
  font-size: 16px;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

html,
body,
#app {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#app {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow: auto;
}
.van-search {
  background-color: red;
}
.footer {
  height: 60px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.banner {
  display: flex;
  justify-content: space-around;
  margin: 10px 0 10px 0;
  flex-wrap: wrap;
  text-align: center;
}
.banner li {
  width: 23%;
  margin-bottom: 5px;
}
.banner li p {
  height: 20px;
  width: 66px;
  line-height: 23px;
  margin: 0 auto;
  margin-bottom: 5px;
}
.banner li img {
  width: 55px;
}
.banner li p {
  text-align: center;
}
.LR {
  background: rgb(247, 241, 241);
  margin-top: 10px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.LR li {
  width: 47%;
  padding-bottom: 10px;
  margin-top: 10px;
  background-color: #fff;
  border-bottom: 1px solid rgb(247, 243, 243);
}
.LR li img {
  width: 80%;
  border-radius: 10px;
  margin-top: 10px;
}
.LR p {
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.LR p span {
  background-color: red;
  color: #fff;
  padding: 5px;
}
.LR div {
  display: flex;
  justify-content: space-around;
}
.LR div span {
  color: red;
}
.LR div p {
  border: 1px gray solid;
  padding: 2px;
  border-radius: 10px;
}
</style>
